<template>
  <div class="homepage-container" :style="backImageStyle">
    <div class="homepage-header">
      <h2>智能报表</h2>
      <span>Intelligence Report</span>
      <img :src="headerImg" alt="" />
    </div>

    <div class="homepage-main">
      <div class="homepage-main-box" v-for="item in menuList" :key="item.title">
        <div class="homepage-main-box-content" @click="jump(item.title)">
          <img :src="item.imgUrl" alt="" />
          <div>
            <h3>{{ item.title }}</h3>
            <i></i>
          </div>
          <p>{{ item.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, ref} from 'vue'
import {
  fetchInitialData,
} from '@src/api/WorkbenchApi';
import { getOssUrl, getLocalesOssUrl } from '@src/util/assets'
const intelligenceReportsMenu1 = getOssUrl('/intelligenceReportsMenu1.png');
const intelligenceReportsMenu2 = getOssUrl('/intelligenceReportsMenu2.png');
// 此图片 可能需要国际化 getLocalesOssUrl
const intelligenceReportsMenu3 = getOssUrl('/intelligenceReportsMenu3.png');
const headerImg = getOssUrl('/intelligenceReportsHeader.png')
const backImageStyle = `background-image: url(${getOssUrl('/intelligenceReportsBG.jpg')});`
import { isDevelopment } from '@src/util/platform';
import { RESOURCE_PREFIX } from '@src/util/linkSwitch';
const resourcePrefix = isDevelopment() ? '' : RESOURCE_PREFIX

export default defineComponent({
  setup() {
    // 工作台灰度
    const isWorkbenchGray = ref(undefined)

    const menuList = [
      {
        imgUrl: intelligenceReportsMenu1,
        title: '统计报表',
        content:
          '对售后业务系统中的流程产生的业务数据进行汇合，加以多个维度的数据统计，支撑工作开展。',
      },
      {
        imgUrl: intelligenceReportsMenu2,
        title: '管理报表',
        content:
          '基于日常管理工作，查看管理职责范围内的数据，及时监控业务状态发现业务问题，为业务决策增加辅助。',
      },
      {
        imgUrl: intelligenceReportsMenu3,
        title: '主题分析报表',
        // tip: '（敬请期待）',
        content:
          '针对售后业务关键要素相关的主题进行系统性的分析，系统智能分析数据输出报告，指导推动业务战略。',
      },
    ];

    // 获取工作台灰度
    async function getWorkBenchGray() {
      const data = await fetchInitialData();
      isWorkbenchGray.value = data?.workbench;
    }

    const jump = async title => {
      // TODO： 是否要判断下功能开关或权限
      if (title === '统计报表') {
        window.location.href = `${resourcePrefix}/stats/statistics`
      }
      
      if (title === '管理报表') {
        if(isWorkbenchGray.value === undefined){
          await getWorkBenchGray()
        }
        if(isWorkbenchGray.value) {
          window.location.href = '/foundation/managementReport';
        }else {
          window.location.href = `${resourcePrefix}/stats/intelligenceReport/management`;
        }
      }
    };

    {
      // IIFE
      // 获取工作台灰度空隙
      getWorkBenchGray()
    }

    return {
      menuList,
      jump,
      backImageStyle,
      headerImg
    };
  },
});
</script>

<style lang="scss" scoped>
@import '../managementReport/index';

.homepage-container {
  width: 100%;
  min-height: 100vh;
  background-repeat:'no-repeat';
  background-size: 100% 100%;
  padding-top: 58px;

  .homepage-header {
    width: 90%;
    height: 34px;
    margin: 0 auto;
    position: relative;

    h2 {
      @include font-setting(24px, 500, #00fcf9, 33px);
      @include position-setting(-30%, 50%, translate(50%, -50%));
      margin: 0;
    }

    span {
      @include font-setting(10px, 400, #00fcf9, 14px);
      @include position-setting(50%, 50%, translate(50%, -50%));
    }

    img {
      width: 100%;
      height: auto;
    }
  }

  .homepage-main {
    width: 100%;
    min-width: 1040px;
    min-height: 330px;
    height: calc(100vw * 0.8 * 0.3 * (11 / 8));
    padding: 0 10%;
    margin-top: 4%;
    @include flex-setting(space-between, center);

    .homepage-main-box {
      @include box-setting(30%, 100%, transparent, 8px);
      @include flex-setting(center, center);

      .homepage-main-box-content {
        // min-width: 300px;
        @include box-setting(90%, 90%, rgba(27, 62, 96, 0.8), 8px);
        border: 1px solid $color-primary-light-6;
        @include flex-setting(center, center, column);
        transition: all 0.1s ease;

        img {
          width: 96%;
          height: auto;
        }

        div {
          width: 75%;
          height: 35px;
          @include flex-setting(center, stretch, column);
          margin: 33px 0 12px;

          h3 {
            @include font-setting(18px, 500, #ffffff, 25px);
            margin: 0;
          }

          i {
            @include box-setting(36px, 2px, $color-primary-light-6, 1px);
            display: inline-block;
            margin-top: 5px;
          }
        }

        p {
          width: 75%;
          @include font-setting(14px, 400, #ffffff, 24px);
        }
      }
    }

    .homepage-main-box:nth-child(-n + 2):hover {
      .homepage-main-box-content {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        background-color: rgba(8, 25, 72, 0.9);
        cursor: pointer;

        div {
          font-size: 22px;
        }
      }
    }

    .homepage-main-box:last-child {
      .homepage-main-box-content {
        cursor: not-allowed;

        h3 {
          color: #92a3b3;
        }

        p {
          color: #92a3b3;
        }
      }
    }
  }
}
</style>
